<!--
 * @Descripttion: 尾部部公共部分
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-09-03 15:48:18
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-20 16:30:29
-->
<template>
	<div class="common-foot">

		<!--  图标服务区 -->
		<div class="common-foot-top">
			<div class="common-foot-top-row">
				<div class="common-foot-top-row-item" v-for="item in icons" :key="item.id" @click="serveJump(item)">
					<div class="common-foot-top-row-item-img">
						<img :src=item.img alt="" width="85px" height="85px">
					</div>
					<div class="common-foot-top-row-item-content">
						<div class="common-foot-top-row-item-content-title">{{item.title}}</div>
						<div class="common-foot-top-row-item-content-subTitle">{{item.subtitle}}</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="footerView">
			<img src="../../../assets/mall-images/bottomBg.jpg" class="bigPic" />
			<div class="footer">
				
				<!-- 
				<div class="item">
					<p class="title">操作手册</p>
					<a class="desc">采购用户操作手册</a><br>
					<a class="desc">供应商操作手册</a>
				</div>
				<div class="item">
					<p class="title">平台规则</p>
					<a class="desc">鞍钢采购商城交易规则</a>
				</div>
				<div class="item">
					<p class="title">资质文件</p>
					<a class="desc">出版物经营许可</a><br>
					<a class="desc">营业执照</a>
				</div> -->


				  <div class="item" v-for="(v,i) in rules" :key="i">
				    <p class="title">{{v.title}}</p>
				      <a class="desc" v-for="(item,index) in v.sub" :key="index">
				        <a class="desc" v-if="item.type==='down'" :href="item.line">{{item.subtitle}}</a>
				        <router-link class="desc" v-else-if="item.type === 'jump'" :to="{path: '/protocol-details',query:{id:item.id}}">{{item.subtitle}}</router-link>
				        <a v-else class="desc" @click="previewPdf(item.line)" style="cursor: pointer;">{{item.subtitle}}</a>
						<br>
				      </a>
				  </div>

				
				
				
				<!-- <div class="item erweima">
					<img src="../../../assets/xcx-ag.jpg">
					<p>扫一扫</p>
					<p>优采小程序</p>
				</div> -->
			</div>
			<div class="common-foot-bottom">
				<div class="common-foot-bottom-server">
					<div class="common-foot-bottom-server-item">
						<div class="font-color">
							<a>Copyright ©优采</a>
							<a href="http://www.beian.gov.cn/" target="_blank">
								<a style="padding-left: 10px;">辽ICP备2021008534号-1</a>
							</a>
						</div>
						<div>
							<i class="common-foot-bottom-server-ba">
								<a href="https://beian.miit.gov.cn/" target="_blank">
									<img src="../../../assets/mall-images/supervise.png" width="15px" height="15px">
								</a>
							</i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 引导 -->
		<!-- <div class="guide">
			<div class="guide-view">
				<div class="item" v-for="(v,i) in rules" :key="i">
					<h3 class="item-head">{{v.title}}<i></i></h3>
					<ul class="item-body" style="padding: 0px;">
						<li v-for="(item,index) in v.sub" :key="index">
							<a class="item-subtitle" v-if="item.type==='down'" :href="item.line">{{item.subtitle}}</a>
							<router-link class="item-subtitle" v-else-if="item.type === 'jump'"
								:to="{path: '/protocol-details',query:{id:item.id}}">{{item.subtitle}}</router-link>
							<a v-else class="item-subtitle" @click="previewPdf(item.line)"
								style="cursor: pointer;">{{item.subtitle}}</a>
						</li>
					</ul>
				</div>
			</div>
		</div> -->
		<!--  商城服务区  -->
		<!-- 预览资质文件  -->
		<el-dialog :visible.sync="dialogVisible" width="50%">
			<pdf :src="pdfUrl" />
		</el-dialog>
	</div>
</template>

<script>
	import pdf from 'vue-pdf'
	import {
		getNav
	} from '@/api/mall.api.js'
	import {
		queryUnitenotices
	} from "@/api/mall.api";
	export default {
		name: 'common-foot',
		props: {},
		components: {
			pdf
		},
		data() {
			const serveZ = require('../../../assets/mall-images/serve-z.png')
			const serveG = require('../../../assets/mall-images/serve-g.png')
			const serveZS = require('../../../assets/mall-images/serve-zs.png')
			return {
				dialogVisible: false,
				pdfUrl: '', // pdf资源路径
				infor: this.$config.baseDate,
				icons: [{
						id: 0,
						img: serveZ,
						title: '无忧购物',
						subtitle: '正规渠道，正品保障'
					},
					{
						id: 1,
						img: serveG,
						title: '急速物流',
						subtitle: '如约送货，送货入户'
					},
					{
						id: 2,
						img: serveZS,
						title: '特色服务',
						subtitle: '按需采购订单'
					}
				],
				purchase: '',
				supplier: '',
				rules: [{
						title: '操作手册'
					},
					{
						title: '平台规则'
					},
					{
						title: '资质文件',
						sub: [{
								type: 'pdf',
								subtitle: '出版物经营许可',
								line: '/static/出版物经营许可.pdf'
							},
							{
								type: 'pdf',
								subtitle: '营业执照',
								line: '/static/营业执照.pdf'
							}
						]
					}
				]
			}
		},
		watch: {},
		computed: {},
		created() {
			// this.getNavFn()
			this.getProtocolRule()
		},
		mounted() {},
		methods: {
			/**
			 * @functionName previewPdf
			 * @param {string} src pdf资源路径
			 * @desccription 预览pdf
			 * @author 穆宏宇
			 * @date 2021-04-16 10:26:03
			 * @version v1.0.0
			 */
			previewPdf(src) {
				this.dialogVisible = true
				this.pdfUrl = src
			},
			serveJump(item) {
				this.$emit('serve-jump', item)
			},
			// 获取顶部导航栏数据
			async getNavFn() {
				const self = this
				await getNav().then(res => {
					// 获取用户手册
					const objGuide = res.filter(item => item.id === '5b16a765f19311eaa1ad0242ac110002');
					const explains = objGuide[0].children;
					let arr = [];
					explains.forEach(item => {
						const {
							optional1,
							optional2
						} = item
						const content = {
							subtitle: optional1,
							line: optional2,
							type: 'down'
						}
						arr.push(content)
					})
					self.$set(self.rules[0], 'sub', arr)
					self.$forceUpdate()
				})
			},
			// 获取平台规则数据
			async getProtocolRule() {
				const self = this
				await queryUnitenotices({
					current: 1,
					size: 5,
					noticeType: 6
				}).then(res => {
					const records = res.records
					let arr = []
					records.forEach(item => {
						const {
							noticeTitle,
							id
						} = item
						const content = {
							subtitle: noticeTitle,
							id: id,
							type: 'jump'
						}
						arr.push(content)
					})
					self.$set(self.rules[1], 'sub', arr)
					self.$forceUpdate()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	$contentW: 1200px;
	$colorW: #FFFFFF;

	// 底部样式
	.common-foot {
		width: 100%;
		min-width: $contentW;

		&-top {
			background-color: $colorW;
		}

		&-bottom {
			// background-color: $--color-primary;
		}
	}

	// 顶层服务区域
	.common-foot-top-row {
		width: $contentW;
		height: 270px;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		&-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			&-img {
				margin-right: 10px
			}

			&-content {
				&-title {
					font-size: 28px;
					line-height: 42px;
					color: $--color-primary;
					font-weight: bold;
				}

				&-subTitle {
					font-size: 23px;
					line-height: 42px;
					color: $--color-primary;
				}
			}
		}
	}

	.common-foot-bottom{
		border-top: 1px solid #ccc;
	}

	// 底部服务区域
	.common-foot-bottom-server {
		width: $contentW;
		height: 140px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-items: center;
			/*margin: 0 20px 10px 0;*/

			.font-color {
				padding-right: 10px;
				// color: $colorW;
				a{
					color: #000;
				}
			}
		}

		&-ba {
			/*margin-right: 5px;*/
		}
	}





	.footerView {
		width: 100%;
		overflow: hidden;
		background: #e2e2e2;

		.bigPic {
			width: 100%;
			border-bottom: 1px solid #ccc;
		}

		.footer {
			width: 1200px;
			margin: 20px auto;
			overflow: hidden;

			.item {
				float: left;
				margin-right: 20px;
				width: 170px;

				.title {
					font-size: 14px;
					margin-bottom: 10px;
					margin-top: 10px;
					cursor: pointer;
				}

				.desc {
					font-size: 12px;
					cursor: pointer;
					color: #333;
				}

				.top {
					width: 100%;
					overflow: hidden;
					border-bottom: 1px solid #ccc;
					padding-bottom: 10px;

					.phone {
						float: left;
						width: 140px;

						.number {
							font-size: 14px;
							font-weight: bold;
							margin-top: 10px;
						}
					}

					.kf {
						float: left;
						width: 100px;
						cursor: pointer;
						img {
							display: block;
							width: 30px;
							height: 30px;
							margin: 10px auto;
						}

						p {
							text-align: center;
							font-size: 12px;
							margin-top: 10px;
						}
					}
				}
			}

			.advice {
				width: 100%;
				height: 60px;
				margin-top: 10px;
				cursor: pointer;
			}

			.erweima {
				float: right;
				width: 135px;

				p {
					text-align: center;
				}

				img {
					width: 80%;
					display: block;
					margin: 0 auto;
				}
			}
		}

	}
</style>
